<template>
  <div class="chat-panel">
    <PageHead>与{{ roleName }}{{ opType }}的聊天</PageHead>
    <section>
      <aside>
        <h4>当前聊天</h4>
        <ul>
          <li>{{ roleName }}</li>
        </ul>
        <h4 v-if="groupList.length>1">其它{{ opType }}</h4>
        <ul v-if="groupList.length>1">
          <li v-for="gItem in groupList.slice(1)" :key="gItem.roleId"
              @click="cutOtherB(gItem.roleId)">{{ gItem.roleName }}
          </li>
        </ul>
      </aside>
      <div class="chat-right">
        <main>
          <ChatMain :msg-list="msgList"/>
        </main>
        <footer>
          <el-upload
              :before-upload="beforeImgUpload"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
              action="/api/common/upChat"
              name="myFile"
          >
            <el-icon size="36">
              <PictureRounded/>
            </el-icon>
          </el-upload>
          <el-input
              v-model="textarea1"
              autosize
              placeholder="请输入消息"
              type="textarea"
          />
          <el-button :icon="Position" type="success" @click="sendMsgB">发送</el-button>
        </footer>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
/*=====封装的聊天页面，医生与用户只是传递的参数不同=====*/
import {PictureRounded, Position} from "@element-plus/icons-vue"
import PageHead from "@/components/row/PageHead.vue";
import {ref} from "vue";
import {ChatGroup} from "@/model/DO/ChatGroup";
import {MsgDo} from "@/model/DO/MsgDo";
import ChatMain from "@/components/chat/ChatMain.vue";
import {ElMessage, UploadRawFile} from "element-plus";

defineProps<{
  opType: "用户" | "医生",
  roleName: string,
  groupList: ChatGroup[],
  msgList: MsgDo[]
}>()

// 待发送的消息
const textarea1 = ref("")
const emit = defineEmits<{
  (e: "sendTxtMsg", value: string): void,
  (e: "sendImgMsg", value: string): void,
  (e: "cutOther", value: number): void
}>()
const sendMsgB = (): void => {
  emit("sendTxtMsg", textarea1.value)
  textarea1.value = ""
}
const cutOtherB = (roleId: number) => {
  emit("cutOther", roleId)
}

/**
 * 图片上传框：上传成功之后的事件
 * @param response 图片名称
 */
const handleAvatarSuccess = (response: string): void => {
  emit("sendImgMsg", response)
}
/**
 * 图片上传框：上传前的校验
 * @param rawFile 上传的聊天图片
 */
const beforeImgUpload = (rawFile: UploadRawFile) => {
  if (rawFile.type !== 'image/png' && rawFile.type !== 'image/jpeg') {
    ElMessage.error('请上传JPG、PNG图片')
    return false
  } else if (rawFile.size > 3145000) {
    ElMessage.error('图片大小不能大于3MB')
    return false
  }
  return true
}
</script>

<style lang="scss" scoped>
/* 高级粉色基调聊天面板 */
.chat-panel {
  width: 98vw;
  height: 95vh;
  background: linear-gradient(135deg, #fff5f5 0%, #ffecef 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(255, 105, 180, 0.15);
  border: 1px solid rgba(255, 182, 193, 0.3);

  /* 页头下面 */
  section {
    display: flex;
    height: calc(100% - 50px);
    background: white;

    aside {
      background: linear-gradient(to bottom, #ff9a9e 0%, #fad0c4 100%);
      width: 240px;
      color: #fff;
      padding: 20px;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);

      h4 {
        margin: 20px 0 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 500;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          padding: 12px 16px;
          margin-bottom: 6px;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 14px;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(5px);

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(4px);
          }
        }
      }

      @media (max-width: 768px) {
        width: 180px;
      }

      @media (max-width: 576px) {
        width: 0;
        padding: 0;
        overflow: hidden;
      }
    }

    /* 侧边栏右边 */
    .chat-right {
      display: flex;
      flex-direction: column;
      width: 100%;

      /* 信息展示区域 */
      main {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        background: rgba(255, 245, 245, 0.6);
        backdrop-filter: blur(10px);
      }

      /* 输入区域 */
      footer {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        background: white;
        border-top: 1px solid rgba(255, 182, 193, 0.3);
        box-shadow: 0 -5px 15px rgba(255, 105, 180, 0.05);

        .el-upload {
          :deep(.el-icon) {
            color: #ff9a9e;
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
              color: #ff6b8b;
              transform: scale(1.1) rotate(10deg);
            }
          }
        }

        .el-input {
          flex: 1;

          :deep(.el-textarea__inner) {
            border-radius: 20px;
            padding: 12px 20px;
            resize: none;
            border: 1px solid rgba(255, 182, 193, 0.5);
            box-shadow: 0 2px 8px rgba(255, 105, 180, 0.1);
            background: rgba(255, 245, 245, 0.5);
            transition: all 0.3s ease;

            &:focus {
              border-color: #ff6b8b;
              box-shadow: 0 2px 12px rgba(255, 105, 180, 0.2);
            }
          }
        }

        .el-button {
          border-radius: 20px;
          padding: 12px 24px;
          background: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%);
          border: none;
          color: white;
          font-weight: 500;
          box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;

          &:hover {
            background: linear-gradient(to right, #ff6b8b 0%, #ffb3c1 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
          }

          &:active {
            transform: translateY(0);
          }

          &::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(30deg);
            transition: all 0.3s ease;
          }

          &:hover::after {
            left: 100%;
          }
        }
      }
    }
  }
}
</style>


